What Is a Webpack Loader and How Does It Work?

本文详细介绍了Webpack中的Loader机制，包括Loader的类型、执行顺序、内联方式以及如何自定义Loader。 重点讨论了NormalLoader和PitchingLoader的区别，以及如何通过PitchingLoader的pitch阶段控制Loader执行。

loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译和 其他更多。

module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。

Webpack 允许使用 加载器 来预处理文件。 这使得你能够打包除 JavaScript 之外的任何静态资源。 你可以使用 Node.js 轻松编写自己的加载器。 加载器通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式自动应用 —— 参见 配置。 markup-inline-loader 将 SVG/MathML 文件内联到 HTML。 在应用图标字体或将 CSS 动画应用于 SVG 时很有用。 更多第三方加

You can easily write your own loaders using Node.js. Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration – see configuration.

webpack 是一个模块打包器。 它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源。

loader 的本质是一个导出一个函数的 JavaScript 模块，这也正体现了 webpack 中 一切皆模块 的思想。 webpack内部的 loader runner 会调用此函数，然后将上一个 loader 产生的结果或者资源文件传入进去。 函数中的 this 作为上下文会被 webpack 填充。